<template>
  <div>
    <headnav>登录</headnav>
    <div class="form">
      <div class="inp">
        <van-field
          v-model="value"
          clearable
          placeholder="请输入用户名"
          class="ii"
        />
      </div>
      <div class="inp inp2">
        <van-field
          v-model="value2"
          type="password"
          clearable
          placeholder="请输入密码"
          class="ii ip"
        />
        <!-- <van-icon name="cross" class="ic" /> -->
        <van-icon
          name="closed-eye"
          @click="change($event)"
          v-show="flag"
          class="ic"
        />
        <van-icon
          name="eye-o"
          @click="change($event)"
          v-show="!flag"
          class="ic"
        />
        <span class="s1">忘记密码</span>
      </div>

      <div class="loginbtn">
        <van-button round style="width: 100%" type="danger" @click="login"
          >登录</van-button
        >
      </div>
      <div class="register">快速注册</div>
      <div class="ziti">
        <p></p>
        <span>其它登录方式</span>
        <p></p>
      </div>

      <div class="quick">
       <i class="iconfont iconfont-qq icon" @click="qqLogin"></i>
        <i class="iconfont iconfont-weixin icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
import headnav from "../../components/headnav.vue";
import { Dologin } from "../../api/index";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      value: "",
      value2: "",
      flag: true,
    };
  },
  methods: {
    ...mapMutations(["setToken", "saveUserInfo", "saveCarInfo"]),

    change(e) {
      const inp = e.target.parentNode.querySelector("input");
      this.flag = !this.flag;
      if (this.flag) {
        inp.setAttribute("type", "password");
      } else {
        inp.setAttribute("type", "text");
      }
    },
    login() {
      let params = {
        username: this.value,
        password: this.value2,
      };
      Dologin(params, (res) => {
        this.setToken({ token: res.data.token });
        this.$store.dispatch("getInfo");
        this.$store.dispatch("getcars");
        this.$router.push("/user").catch(() => {});
      });
    },
    qqLogin(){
      // Location.
      // Location.herf = "https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=101850878&redirect_uri=http://localhost:3000/proxy&state=1"

     this.$qq.Login.showPopup({
        appId: "101850878",
        redirectURI: "http://localhost:8080/proxy",
      });
    }
  },
  components: {
    headnav,
  },
};
</script>

<style lang="scss" scoped>
.form {
  margin-top: 100px;
  padding: 50px;
  box-sizing: border-box;

  .inp {
    width: 100%;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 36px;
    border-bottom: 1px solid #dcdcdc;
    .ii {
      width: 100%;
      height: 100%;
      padding: 0;
      font-size: 36px;
    }
  }

  .inp2 {
    display: flex;
    align-items: center;
    .ic {
      padding: 5px;
    }
    .s1 {
      width: 45%;
      // height: 100%;
      padding: 10px;
      border-left: 1px solid #dcdcdc;
    }
  }

  .loginbtn {
    margin-top: 100px;
    font-size: 36px;
  }

  .register {
    margin-top: 20px;
    text-align: end;
    font-size: 32px;
  }

  .ziti {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
    p {
      width: 30%;
      border-top: 1px solid #dcdcdc;
    }
    span {
      font-size: 36px;
    }
  }

  .quick {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    .icon {
      padding: 0 20px;
      font-size: 100px;
    }
  }
}
</style>